<template>
  <div v-loading="pageLoading" class="flex flex-col flex-1">
    <div class="w-full home-title mb30px">会议数据</div>
    <div class="flex flex-wrap flex-justify-between flex-1 flex-items-start" style="align-content: flex-start">
      <div
        v-for="(item, index) in businessData"
        :key="index"
        class="w31% h43.5% flex flex-items-center pt30px pl18px rd-6px overflow-hidden cursor-pointer relative"
        :class="`${index >= 3 ? 'mt24px' : ''} ${(index + 1) % 3 === 0 ? '' : 'mr2%'}`"
        :style="`background:url('${item.background}') no-repeat;background-size: cover;background-position:right`"
        @click="goPage(item.link)"
      >
        <div class="full text-16px font-bold c-#fff">
          <div class="text-16px">{{ item.name }}</div>
          <div class="mt16px text-26px">{{ toQFF(data[item.key]) }}</div>
        </div>
        <!-- <img v-if="item.icon" class="absolute right-18px bottom-20px" :src="item.icon" :style="item.iconStyle" /> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const businessData = ref<any[]>([
  {
    name: '会议总数',
    key: 'yjxmsl',
    background: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/yjxm-bg.png',
    link: '/project/index',
    icon: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/yjxm-icon.png',
    iconStyle: { width: '32px', height: '37px' },
  },
  {
    name: '场所数量',
    key: 'zsgys',
    background: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/zsgys-bg.png',
    icon: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/zsgys-icon.png',
    iconStyle: { width: '39px', height: '37px' },
    link: '/supplier/supplierList?type=1',
  },
  {
    name: '会议室数量',
    key: 'khsl',
    background: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/khsl-bg.png',
    icon: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/khsl-icon.png',
    iconStyle: { width: '32px', height: '39px' },
    link: '/crm/crmList',
  },

  {
    name: '累计参会人数',
    key: 'xmzs',
    background: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/zsgys-bg.png',
    link: '/project/index',
    icon: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/xmzsl-icon.png',
    iconStyle: { width: '45px', height: '33px' },
  },
  {
    name: '累计签到率',
    key: 'qzgys',
    background: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/qzgys-bg.png',
    link: '/supplier/supplierList?type=0',
    icon: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/qzgys-icon.png',
    iconStyle: { width: '39px', height: '37px' },
  },
  {
    name: '会议室使用率',
    key: 'rysl',
    background: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/yhsl-bg.png',
    link: '/authManagement/user',
    icon: 'https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/yhsl-icon.png',
    iconStyle: { width: '37px', height: '35px' },
  },
])
const router = useRouter()
const goPage = (link: string) => {
  link && router.push(link)
}
const data = ref<any>({})

onMounted(() => {})

const pageLoading = ref<boolean>(false)

function toQFF(value: any) {
  return value ? `${value.toString().replaceAll(/\B(?=(\d{3})+(?!\d))/g, ',')}` : `${0}`
}
</script>

<style lang="scss" scoped></style>
